<template>
  <div class="result">
    <div class="open">
      <div class="title">{{ball_number}}期</div>
      <div class="content">
        <ul>
          <li>{{ball1}}</li>
          <li>{{ball2}}</li>
          <li>{{ball3}}</li>
          <li>{{ball4}}</li>
          <li>{{ball5}}</li>
          <li>{{ball6}}</li>
          <li>{{ball7}}</li>
          <li>{{ball8}}</li>
          <li>{{ball9}}</li>
          <li>{{ball10}}</li>
        </ul>
      </div>
    </div>
    <div class="open">
      <div class="title">{{ball_number+1}}期</div>
      <div class="content">
        <div class="plate">
          <span class="plate-title">封盘</span>
          <div class="plate-time">
            <p>{{minute_2}}分{{second_2}}秒</p>
          </div>
        </div>
        <div class="lottery">
          <span class="lottery-title">开奖</span>
          <div class="lottery-time">
            <p>{{minute}}分{{second}}秒</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        date: '',
        Times: [],
        ball_number: '',
        minutes: 5,
        minutes_2: 3,
        seconds: 0,
        seconds_2: 0,
        ball1: '',
        ball2: '',
        ball3: '',
        ball4: '',
        ball5: '',
        ball6: '',
        ball7: '',
        ball8: '',
        ball9: '',
        ball10: ''
      }
    },
    created() {
      this.$http.get('http://zdssc.hiberbest.com/public/index.php').then((response) => {
        this.date = response.data
      }).catch((error) => {
        console.log(error)
      })
      this.timeget()
    },
    mounted() {
      this.add_one()
      this.add_two()
    },
    methods: {
      timeget() {
        setTimeout(() => {
          for (let i = 0; i < this.date.length; i++) {
            // 获取开奖时间的数组
            this.Times.push(this.date[i].time.replace(/-/g, '/'))
            // 获取开奖期数的数组
          }
          this.open_time = this.Times[0]
          this.ball1 = this.date[0].ball1
          this.ball2 = this.date[0].ball2
          this.ball3 = this.date[0].ball3
          this.ball4 = this.date[0].ball4
          this.ball5 = this.date[0].ball5
          this.ball6 = this.date[0].ball6
          this.ball7 = this.date[0].ball7
          this.ball8 = this.date[0].ball8
          this.ball9 = this.date[0].ball9
          this.ball10 = this.date[0].ball10
          this.ball_number = this.date[0].qishu
          this.getKJtime()
        }, 100)
      },
      getKJtime() {
        // 获取服务端开奖时间
        let KJ_TIME = this.open_time
        // 获取现在时间
        let Nowtime = new Date()
        // 转换成距1970年1月1日之间的毫秒数
        let mistake = Nowtime.getTime()
        // console.log(mistake)
        // 后台时间转换时间戳
        let Endtime = new Date(KJ_TIME).getTime()
        // 计算得到的倒计时的差值
        // console.log(Endtime)
        let t = Endtime - mistake
        // console.log(t)
        let h = 0
        let m = 0
        let s = 0
        if (t >= 0) {
          h = Math.floor(t / 1000 / 3600)
          m = Math.floor(t / 1000 / 60 % 60)
          s = Math.floor(t / 1000 % 60)
        } else {
          console.log('你错过开奖了')
        }
        if (h <= 0) {
          // console.log(m)
          // console.log(s)
          this.minutes = m
          this.seconds = s
          this.seconds_2 = s
          this.minutes_2 = m - 2
          if (this.minutes_2 < 0) {
            this.minutes_2 = 0
            this.seconds_2 = 0
          }
          if (h === 0 && m === 0 && s === 0) {
            console.log('时间到了')
          } else {
          }
        }
      },
      num: function (n) {
        return n < 10 ? '0' + n : '' + n
      },
      add_one: function () {
        let _this = this
        let time = window.setInterval(function () {
          if (_this.seconds === 0 && _this.minutes !== 0) {
            _this.seconds = 59
            _this.minutes -= 1
          } else if (_this.minutes === 0 && _this.seconds === 0) {
            _this.seconds = 0
            window.clearInterval(time)
          } else {
            _this.seconds -= 1
          }
        }, 1000)
      },
      add_two: function () {
        let _this = this
        let time = window.setInterval(function () {
          if (_this.seconds_2 === 0 && _this.minutes_2 !== 0) {
            _this.seconds_2 = 59
            _this.minutes_2 -= 1
          } else if (_this.minutes_2 === 0 && _this.seconds_2 === 0) {
            _this.seconds_2 = 0
            window.clearInterval(time)
          } else {
            _this.seconds_2 -= 1
          }
        }, 20)
      }
    },
    // watch: {
    //   second: {
    //     handler(newVal) {
    //       this.num(newVal)
    //     }
    //   },
    //   minute: {
    //     handler(newVal) {
    //       this.num(newVal)
    //     }
    //   }
    // },
    computed: {
      minute: function () {
        return this.num(this.minutes)
      },
      minute_2: function () {
        return this.num(this.minutes_2)
      },
      second: function () {
        return this.num(this.seconds)
      },
      second_2: function () {
        return this.num(this.seconds_2)
      }
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">
  .result {
    height: 100px;
    width: 96%;
    border: #7e8c8d solid 1px;
    border-bottom: 0;
    margin: 2%;
    .open {
      height: 50px;
      width: 100%;
      text-align: center;
      line-height: 50px;
      display: flex;
      border-bottom: #7e8c8d solid 1px;
      .title {
        flex: 20%;
        height: 50px;
        font-size: 14px;
        border-right: 1px solid #7e8c8d;
      }
      .content {
        flex: 80%;
        height: 50px;
        ul {
          line-height: 50px;
          text-align: center;
          padding-top: 10px;
          li {
            float: left;
            width: 6%;
            height: 30px;
            line-height: 30px;
            padding-left: 1%;
            padding-right: 1%;
            background: cornflowerblue;
            margin-left: 1.5%;
            border-radius: 4px;
            font-size: 14px;
            color: white;
          }
        }
        .plate {
          width: 50%;
          height: 50px;
          display: flex;
          float: left;
          text-align: center;
          .plate-title {
            flex: 30%;
            padding-left: 10%;
          }
          .plate-time {
            flex: 70%;
          }
        }
        .lottery {
          width: 50%;
          height: 50px;
          display: flex;
          float: left;
          text-align: center;
          .lottery-title {
            flex: 30%;
            padding-left: 10%;
          }
          .lottery-time {
            flex: 70%;
          }
        }

      }
    }
  }
</style>
